<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {defineModel, onBeforeUnmount, ref, shallowRef} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {IEditorConfig, IToolbarConfig} from '@wangeditor/editor'

defineOptions({
	name: 'BaseEditor'
})
const props = defineProps<{
	excludeKeys?: string[] // 菜单栏需要忽略的配置
	editorConfig?: Partial<IEditorConfig>
}>()
const model = defineModel<any>() // 双向绑定
const editorRef = shallowRef() // 实例
const toolbarConfig: Partial<IToolbarConfig> = {
	toolbarKeys: [
		'headerSelect',
		'blockquote',
		'|',
		'bold',
		'underline',
		'italic',
		{
			key: 'group-other-style',
			title: '其他文字格式',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
			menuKeys: ['through', 'code', 'sub', 'sup', 'clearStyle']
		},
		'color',
		'bgColor',
		'|',
		'fontSize',
		'fontFamily',
		'lineHeight',
		'|',
		'bulletedList',
		'numberedList',
		'todo',
		{
			key: 'group-justify-style',
			title: '对齐方式',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
			menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
		},
		{
			key: 'group-indent-style',
			title: '缩进',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
			menuKeys: ['indent', 'delIndent']
		},
		'|',
		'emotion',
		{
			key: 'group-link-style',
			title: '链接',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M440.224 635.776a51.84 51.84 0 0 1-36.768-15.232c-95.136-95.136-95.136-249.92 0-345.056l192-192C641.536 37.408 702.816 12.032 768 12.032s126.432 25.376 172.544 71.456c95.136 95.136 95.136 249.92 0 345.056l-87.776 87.776a51.968 51.968 0 1 1-73.536-73.536l87.776-87.776a140.16 140.16 0 0 0 0-197.984c-26.432-26.432-61.6-40.992-99.008-40.992s-72.544 14.56-99.008 40.992l-192 192a140.16 140.16 0 0 0 0 197.984 51.968 51.968 0 0 1-36.768 88.768z"></path><path d="M256 1012a242.4 242.4 0 0 1-172.544-71.456c-95.136-95.136-95.136-249.92 0-345.056l87.776-87.776a51.968 51.968 0 1 1 73.536 73.536l-87.776 87.776a140.16 140.16 0 0 0 0 197.984c26.432 26.432 61.6 40.992 99.008 40.992s72.544-14.56 99.008-40.992l192-192a140.16 140.16 0 0 0 0-197.984 51.968 51.968 0 1 1 73.536-73.536c95.136 95.136 95.136 249.92 0 345.056l-192 192A242.4 242.4 0 0 1 256 1012z"></path></svg>',
			menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
		},
		{
			key: 'group-img-style',
			title: '图片',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
			menuKeys: ['uploadImage', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink', 'imageWidth30', 'imageWidth50', 'imageWidth100']
		},
		{
			key: 'group-video-style',
			title: '视频',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',
			menuKeys: ['insertVideo', 'uploadVideo', 'editVideoSize']
		},
		{
			key: 'group-table-style',
			title: '表格',
			iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64v896h1024V64H0z m384 576v-192h256v192h-256z m256 64v192h-256v-192h256z m0-512v192h-256V192h256zM320 192v192H64V192h256z m-256 256h256v192H64v-192z m640 0h256v192h-256v-192z m0-64V192h256v192h-256zM64 704h256v192H64v-192z m640 192v-192h256v192h-256z"></path></svg>',
			menuKeys: ['insertTable', 'deleteTable', 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth']
		},
		'codeBlock',
		'divider',
		'|',
		'undo',
		'redo',
		'|',
		'fullScreen',
		'gapFilling'
		//'enter'
		// 'codeSelectLang',
		//{
		//	key: 'group-header-style',
		//	title: '标题',
		//	// iconSvg: '<svg>....</svg>', // svg图标可选
		//	menuKeys: ['header1', 'header2', 'header3', 'header4', 'header5']
		//},
	],
	excludeKeys: props.excludeKeys || ['|']
} // Toolbar配置
const mode = ref('default') // 或 'simple'
const editorConfig: Partial<IEditorConfig> = props.editorConfig || {
	placeholder: '请输入内容...'
} // Editor配置

const handleCreated = (editor: any) => {
	editorRef.value = editor // 记录 editor 实例，重要！
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
	const editor = editorRef.value
	if (editor == null) return
	editor.destroy()
})
</script>
<script lang="ts">
import {Boot} from '@wangeditor/editor'
import gapModule from '@/components/BaseEditor/gapFilling'

Boot.registerModule(gapModule)
</script>

<template>
	<div style="border: 1px solid #ccc; width: 100%; z-index: 9">
		<Toolbar
			:default-config="toolbarConfig"
			:editor="editorRef"
			:mode="mode"
			style="border-bottom: 1px solid #ccc;"
		/>
		<Editor
			v-model="model"
			:default-config="editorConfig"
			:mode="mode"
			style="height: 500px; overflow-y: hidden; width: 100%;"
			@onCreated="handleCreated"
		/>
	</div>
</template>

<style lang="scss" scoped></style>
